import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:qr_code_app/common/constant/color_config.dart';
import 'package:qr_code_app/generated/assets/qr_code_app_assets.dart';
import 'package:qr_code_app/module/login/bloc/login_bloc.dart';
import 'package:qr_code_app/widget/qrcode_textfield.dart';
import 'package:todo_flutter/todo_flutter.dart';

class LoginWidget extends BaseStatelessWidget {
  final LoginBloc bloc;

  LoginWidget(this.bloc);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        QrCodeCommonInput(
          textInputAction: TextInputAction.go,
          keyboardType: TextInputType.phone,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(11),
          ],
          placeholder: '请输入手机号',
          placeholderFontSize: 18,
          placeholderColor: ColorsConfig.ffdbdfe6,
          fontSize: 18,
          maxLength: 11,
          color: Colors.white,
          controller: bloc.phoneController,
          onTextChange: (s) {
            bloc.hasNextBtnHighlightBloc.changeData(
                bloc.phoneController.text.isNotEmpty &&
                    bloc.codeController.text.isNotEmpty);
          },
          suffixMode: OverlayVisibilityMode.editing,
          suffix: CommonClickWidget(
            singleClick: () {
              bloc.phoneController.text = '';
              bloc.hasNextBtnHighlightBloc.changeData(true);
            },
            child: Icon(
              Icons.clear,
              weight: 20,
              color: Colors.white,
            ),
          ),
        ),
        sizedBox(height: 12),
        QrCodeCommonInput(
          textInputAction: TextInputAction.go,
          keyboardType: TextInputType.number,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(4),
          ],
          placeholder: '请输入验证码',
          placeholderColor: ColorsConfig.ffd5d8d9,
          placeholderFontSize: 18,
          padding: only(bottom: 8),
          fontSize: 18,
          maxLength: 4,
          controller: bloc.codeController,
          color: Colors.white,
          onTextChange: (s) {
            bloc.hasNextBtnHighlightBloc.changeData(
                bloc.phoneController.text.isNotEmpty &&
                    bloc.codeController.text.isNotEmpty);
          },
        ),
        DataChangeWidget(
          bloc: bloc.hasNextBtnHighlightBloc,
          child: (_, has) {
            return CommonClickWidget(
              onTap: () {
                if (!has) {
                  return;
                }
                bloc.login();
              },
              child: Container(
                height: setWidth(52),
                alignment: Alignment.center,
                color: has!
                    ? Colors.black.withOpacity(0.4)
                    : ColorsConfig.ffc7ccd5.withOpacity(0.4),
                child: CommonText(
                  '登录',
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
            );
          },
        ),
      ],
    );
  }
}
